<template>
  <!-- header部分 -->
    <header>
        <p>在线支付</p>
    </header>

  <!-- 订单信息部分 -->
    <h3>订单信息：</h3>
    <OrderItem
            :isNeedPaied="true"
            :isPaymentPage="true"
            :orderInfo="orderInfo"
    />

  <!-- 支付方式部分 -->
    <ul class="payment-type">
        <li @click="isWechatPay = !isWechatPay">
            <img src="../assets/img/alipay.png">
            <font-awesome-icon v-show="!isWechatPay" :icon="['fas', 'circle-check']" style="font-size: 5vw;color: #38ca73;" />
        </li>
        <li @click="isWechatPay = !isWechatPay">
            <img src="../assets/img/wechat.png">
            <font-awesome-icon v-show="isWechatPay" :icon="['fas', 'circle-check']" style="font-size: 5vw;color: #38ca73;" />
        </li>
    </ul>

    <div class="payment-button">
        <button @click="pay">确认支付</button>
    </div>

</template>

<script setup>
import OrderItem from "../components/OrderItem.vue";
import {useRoute} from "vue-router";
import {onMounted,ref} from "vue";
import {getOrdersByIdAPI, updateOrderStateAPI} from "../api/api.js";
import router from "../route/route.js";
import {getSessionStorage} from "../common.js";
const isWechatPay = ref(false)
const route = useRoute()
const orderId = ref(null)
const orderInfo = ref(null)

onMounted(async ()=>{
    orderId.value = route.params.orderId
    await getOrdersByIdAPI(getSessionStorage("user").token,orderId.value).then(res=>{
        //获取订单内容
        orderInfo.value = res.data.data
    })
})

const pay = ()=>{
    const data = new  FormData()
    data.append("orderId",orderId.value)

    updateOrderStateAPI(getSessionStorage("user").token,data).then(res=>{
        if (res.data.code === "200"){
            console.log(res.data.msg)
            router.push({path:"/order"})
        }else {
            console.log(res.data.msg)
        }
    })
}
</script>

<style scoped>
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}
h3{
    text-align: left;
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw 4vw 0;

    font-size: 4vw;
    font-weight: 300;
    color: #999;
}
.payment-type{
    width: 100%;
}
.payment-type li{
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.payment-type li img{
    width: 33vw;
    height: 8.9vw;
}

.payment-button{
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
}
.payment-button button{
    width: 100%;
    height: 10vw;
    border: none;
    /*去掉外轮廓线*/
    outline: none;
    border-radius: 4px;
    background-color: #38CA73;
    color: #fff;
}
</style>